<template>
  <view class="user-main">
    <view class="user-box dispaly-just-between">
      <view class="user-left dispaly-just-between">
        <view class="user-avatar" @click="
          $goUrl(
            `/pages/index/pages/businessCard?id=${props?.item?.userId}&circleId=${cId}`
          )
          ">
          <image :src="props?.item?.avatar" mode="aspectFill" />
        </view>
        <view class="user-info-box">
          <view class="time">{{ props?.item?.nickName }}</view>
          <view class="user-info-top dispaly-line-center">
            <view class="name">{{ props?.item?.department }}</view>
            <view class="job-name" v-if="props?.item?.company">({{ props?.item?.company }})</view>
          </view>
        </view>
      </view>
      <!-- v-if="props?.isShow == false" -->
      <view class="option dispaly-align-center">
        <image class="i-one" src="/static/icon/tel1.svg" mode="widthFix" @click="call"
          v-if="props?.item?.phonenumber && props.item.userId != userId" />
        <image src="/static/icon/msg1.svg" v-if="props.item.userId != userId && props?.item?.isFriend == 1"
          mode="widthFix" @click="chat(props?.item?.userId, props?.item?.nickName)" />
        <!-- <view class="option dispaly-align-center" v-if="props?.isShow && props?.item?.isFriend == 0"> -->
        <image class="i-one" v-if="
          props?.isShow &&
          props?.item?.isFriend == 0 &&
          props.item.userId != userId
        " src="/static/icon/customer-add.svg" mode="widthFix" @click="addFriends(props?.item?.userId)" />
        <!-- </view> -->
      </view>
    </view>
    <view class="desc">{{ props?.item?.speciality }}</view>
  </view>

  <!-- 删除评论提示 -->
  <van-dialog v-model:show="addShow" @confirm="confirmChange" title="验证消息" show-cancel-button>
    <view class="content">
      <textarea class="text-a" v-model="textarea" placeholder="请输入验证消息..."></textarea>
    </view>
  </van-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { addFriend, showTel } from "@/api/apiList";
import { onLoad } from "@dcloudio/uni-app";

const getIds = ref();
onLoad((e) => {
  if (e && e?.id) {
    getIds.value = e?.id;
  }
});
const props = defineProps({
  item: Object,
  isShow: Boolean,
  cId: Number || String,
  circleId: Number || String,
  isAdmin: Number || String,
  isGroup: Number || String,
});

const userId = uni.getStorageSync("userInfo").userId;
const showNum = ref("");
const call = async () => {
  // if (!props.item.showNum)
  //   return uni.navigateTo({
  //     url: `/pages/circle/pages/telPay?circleId=${getIds.value}&type=1`,
  //   });

  // uni.makePhoneCall({
  //   phoneNumber: props?.item?.phonenumber,
  // });
  // return;
  // uni.showLoading({
  //   title: "请求中...",
  // });
  // setTimeout(() => {
  //   uni.hideLoading();
  // }, 2000);
  if (props.isAdmin == 1 || props.isGroup == 1) {
    uni.makePhoneCall({
      phoneNumber: props?.item?.phonenumber,
    });
  } else {
    const res = await showTel({
      circleId: props.circleId,
      memberId: props.item.userId,
    }); // showNum > 1 不用付钱
    if (res.code == 200) {
      showNum.value = res.data;
      if (showNum.value > 0) {
        uni.makePhoneCall({
          phoneNumber: props?.item?.phonenumber,
        });
      } else {
        uni.navigateTo({
          url: `/pages/circle/pages/telPay?circleId=${getIds.value}&type=1`,
        });
      }
    }
  }
};

const chat = async (id, name) => {
  if (props.isAdmin == 1 || props.isGroup == 1) {
    uni.navigateTo({
      url: `/pages/circle/pages/chat?id=${id}&name=${name}`,
    });
  } else {
    const res = await showTel({
      circleId: props.circleId,
      memberId: props.item.userId,
    }); // showNum > 1 不用付钱
    return uni.navigateTo({
      url: `/pages/circle/pages/chat?id=${id}&name=${name}`,
    });
    if (res.code == 200) {
      showNum.value = res.data;
      if (showNum.value > 0) {
        uni.navigateTo({
          url: `/pages/circle/pages/chat?id=${id}&name=${name}`,
        });
      } else {
        uni.navigateTo({
          url: `/pages/circle/pages/telPay?circleId=${props.circleId}&type=2`,
        });
      }
    }
  }
};

const addShow = ref(false);
const getUserId = ref();
const addFriends = (ids) => {
  getUserId.value = ids;
  addShow.value = true;
};

const textarea = ref();
const confirmChange = async () => {
  const response = await addFriend({
    userId: getUserId.value,
    memo: textarea.value,
    circleId: getIds.value,
    nickName: props.item.nickName,
  });
  if (response && response?.code == 200) {
    uni.showToast({
      title: "发送成功",
      icon: "none",
    });
    // addShow.value = !addShow.value;
    this.$emits("isTrue", true);
  }
};
</script>

<style lang="scss" scoped>
.user-main {
  margin-bottom: 48rpx;
}

.content {
  padding: 50rpx;

  .text-a {
    width: 100%;
    height: 200rpx;
    border: 1rpx solid #dddddd;
    border-radius: 8rpx;
    // padding: 26rpx 0 0 10rpx;
  }
}

.desc {
  font-family: PingFang SC Regular;
  font-size: 26rpx;
  color: #111111;
}

.user-box {
  .user-left {
    .user-avatar {
      margin-right: 20rpx;

      image {
        width: 104rpx;
        height: 104rpx;
        border-radius: 50%;
      }
    }
  }

  .option {
    // .i-one {
    //   margin-right: 40rpx;
    // }

    image {
      margin: 0 10rpx;
      width: 40rpx;
      height: 40rpx;
    }
  }

  .user-info-box {
    .user-info-top {
      .name {
        font-family: PingFang SC Regular;
        font-size: 24rpx;
        color: #111111;
      }

      .job-name {
        font-family: PingFang SC Regular;
        font-size: 24rpx;
        color: #999999;
      }
    }

    .time {
      font-family: PingFang SC Regular;
      font-size: 24rpx;
      font-weight: 700;
      color: #111;
    }
  }
}
</style>
